<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@ include file="../header.jsp"%>
</head>
<body>
	<div class="demoTable" style="margin-top: 10px;">
  		商品名搜索:
  		<div class="layui-inline">
    		<input class="layui-input" id="name" autocomplete="off">
  		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
	</div>
	
	<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
	
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script type="text/html" id="statusTpl">
        {{#        	if(d.status == 1) {            		}}
                    		在售
        {{#        	} else if (d.status == 2) {     	}}
                   			下架
        {{#        	} else if (d.status == 3) {     	}}
                    		删除
        {{#     }                                  		}}
    </script>
	
	<script type="text/html" id="topbarDemo">
 		<div class="layui-btn-container">
 	  		<button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
  			<button class="layui-btn layui-btn-sm" lay-event="insert">添加</button>
		</div>
	</script>
		
	<script type="text/javascript">
		layui.use('table', function(){
			var table = layui.table;
			table.render({
				elem: '#tableId'
		    	,url:'${path}/category/selectByPage.action'
		    	,toolbar: '#topbarDemo' //开启头部工具栏，并为其绑定左侧模板
		    	,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		    	,cols: [[
					{type: 'checkbox', fixed: 'left'}
					,{field:'id', title: 'ID', sort: true}
					,{field:'name', title: '类别名称'}
					,{field:'status', title: '状态', templet: "#statusTpl"}
					,{field:'creatrTime', title: '创建时间', templet:"<div>{{!d.createTime?'未知':layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}</div>", sort: true}
					,{field:'updateTime', title: '修改时间', templet:"<div>{{!d.updateTime?'未知':layui.util.toDateString(d.updateTime, 'yyyy-MM-dd')}}</div>", sort: true}
					,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
		    	]]
		  		,page: true
		  		,id: 'tableReload'
			});
			//查询重载
			var $ = layui.$, active = {
				reload: function(){// 当点击搜索按钮触发这个方法
					var demoReload = $('#demoReload');
					//执行重载
					table.reload('tableReload', {
						page: {
							curr: 1 //重新从第 1 页开始
						}
						,where: { //  /student/selectByPage.action?page=1&limit=10&name=55&gender=男
		        	 		name: $('#name').val(),
		        		}
		      		}, 'data');
				},
			};
		  
			$('.demoTable .layui-btn').on('click', function(){
				var type = $(this).data('type');
		    	active[type] ? active[type].call(this) : '';
			});
			//头工具栏事件
			table.on('toolbar(tableFilter)', function(obj){
				var checkStatus = table.checkStatus(obj.config.id);
				switch(obj.event){
					//删除选中
					case 'deleteAll':
						var data = checkStatus.data;
						console.log(data);
						layer.confirm(
							'您确定要删除所选内容吗？',
		    				{icon : 3},
		    				function(){
		    					var ids = [];
		    					$(data).each(function() {
									ids.push(this.id);
								});
		    					var idsStr = ids.join(',');
		    					console.log(idsStr);
		    					$.post(
									'${path}/category/deleteAll.action',
									{'ids' : ids},
									function(jsonObj){
										if (jsonObj.code == 0) {
											// mylayer.successUrl(jsonObj.msg, '${path}/users?method=selectAll');
											mylayer.successMsg(jsonObj.msg);
											table.reload('tableReload');	
										} else {
											mylayer.errorMsg(jsonObj.msg);
										}
									},
									'json'
								);
		    				}
						);
					break;
				//添加
		      	case 'insert':
		    	  	layer.open({
		    		  	type : 2,
		    		  	title : '添加新员工',
		    		  	area : ['500px', '600px'],
		    		  	content : '${path}/users/selectDepartmentRole.action'
		    	  	});
		      		break;
		      	//自定义头工具栏右侧图标 - 提示
		      	case 'LAYTABLE_TIPS':
		        	layer.alert('这是工具栏右侧自定义的一个图标按钮');
		      		break;
				};
			});
			//监听行工具toolbar事件
			table.on('tool(tableFilter)', function(obj){
				var data = obj.data;// data: {一个监听的集合}
		    	console.log(obj)
				if(obj.event === 'del'){
		    		layer.confirm(
						'你确定要删除吗？',
						{icon : 3},
						function(index){// 点击确认触发
							$.post(
								'${path}/category/deleteByPrimaryKey.action',
								{'id' : data.id},
								function(jsonObj){
									if (jsonObj.code == 0) {
										// mylayer.successUrl(jsonObj.msg, '${path}/users?method=selectAll');
										mylayer.successMsg(jsonObj.msg);
										table.reload('tableReload');	
									} else {
										mylayer.errorMsg(jsonObj.msg);
									}
								},
								'json'
							);
							layer.close(index);
						}
					);
				} else if(obj.event === 'edit'){
					layer.open({
		    			type : 2,
		    			title : '修改',
		    			area : ['500px', '600px'],
		    			content : '${path}/users/selectId.action?id=' + data.userId
		    		}); 
		    	}
			});
			// 页面编辑(待完善)
			table.on('edit(tableId)', function(obj){
				var value = obj.value //得到修改后的值
				,data = obj.data //得到所在行所有键值
				,field = obj.field; //得到字段
				layer.msg('[ID: '+ data.userId +'] ' + field + ' 字段更改为：'+ value);
			}); 
		});
	</script>
</body>
</html>